<template>
	<view>
		<block v-for="(item, index) in getHilightStrArray" :key="index">
			<text :style="(item == keyword? 'color:' + color + '!important' : '' )">{{item}}</text>
		</block>
	</view>
</template>
<script>
	export default {
		props: {
			// 需要显示的文本
			text: {
				type: String,
				default:()=>""
			},
			// 需要高亮的关键字
			keyword: {
				type: String,
				default:()=>""
			},
			// 高亮的颜色
			color: {
				type: String,
				default: '#6665EB'
			}
		},
		
		computed: {
			/**
			 * 将文本和关键字分割成数组
			 * @param text  完整字符串
			 * @param keyword  高亮字符串
			 * @returns 将关键字分割后的数组
			 */
			getHilightStrArray() {
				return this.text.replace(new RegExp(`${this.keyword}`, 'g'), `%%${this.keyword}%%`).split('%%');
			}
		}
	}
</script>
